<template>
	<view class="order-detail">
		<!-- 消费 -->
		<view v-if="pageObj.type === 'consumption'">
			<view class="block" v-for="item in dataObj.items" :key="item.id">
				<view class="header consumption">
					<image class="cover" :src="item.image_url"></image>
					<view class="title">{{item.name}}</view>
					<view class="info">
						<span v-if="item.cat_type === 1">共{{item.class_count || '0'}}课时</span>
						</view>
				</view>
				<view class="content" v-if="item.cat_type === 1">
					<view class="c-title">课程讲师</view>
					<view class="c-data">{{item.teacher || '-'}}</view>
				</view>
				<view class="content">
					<view class="c-title">课程形式</view>
					<view class="c-data">{{dicObj.type[item.cat_type]}}</view>
				</view>
				<view class="content">
					<view class="c-title">单价</view>
					<view class="c-data">¥{{item.price || '0'}}</view>
				</view>
				<view class="content">
					<view class="c-title">数量</view>
					<view class="c-data">{{item.nums || '0'}}</view>
				</view>
				<view class="content">
					<view class="c-title">优惠券</view>
					<view class="c-data">-¥{{item.costprice || '0'}}</view>
				</view>
				<view class="amount">
					<span class="a-title">实付价格：</span>
					<span class="unit">¥</span>
					<span class="number">{{item.amount || '0'}}</span>
				</view>
			</view>
		</view>
		
		<!-- 充值 -->
		<view class="block" v-if="pageObj.type === 'recharge'">
			<view class="header recharge">
				<image class="cover" src="../../../static/images/user/order-recharge.png"></image>
				<view class="title">充值{{dataObj.order_amount || '0'}}元</view>
				<view class="info">APP内</view>
			</view>
			<view class="amount">
				<span class="a-title">实付价格：</span>
				<span class="unit">¥</span>
				<span class="number">{{dataObj.order_amount || '0'}}</span>
			</view>
		</view>
		
		<view class="block" v-if="pageObj.loading">
			<view class="title">订单信息</view>
			<view class="content">
				<view class="c-title">订单总金额</view>
				<view class="c-data">{{dataObj.order_amount || '0'}}</view>
			</view>
			<view class="content">
				<view class="c-title">订单实付</view>
				<view class="c-data">{{dataObj.order_amount || '0'}}</view>
			</view>
			<view class="content">
				<view class="c-title">订单状态</view>
				<view class="c-data">{{dicObj.payStatus[dataObj.pay_status]}}</view>
			</view>
			<view class="content">
				<view class="c-title">订单编号</view>
				<view class="c-data">{{dataObj.order_id}}</view>
			</view>
			<view class="content" v-if="dataObj.pay_status === 2">
				<view class="c-title">支付方式</view>
				<view class="c-data">{{dataObj.payment_name}}</view>
			</view>
			<view class="content" v-if="dataObj.pay_status === 2">
				<view class="c-title">订单完成时间</view>
				<view class="c-data">{{dataObj.payment_time}}</view>
			</view>
		</view>
		
		<view class="pay-btn" @click="onPayTap" v-if="dataObj.pay_status === 1">立即支付</view>
	</view>
</template>

<script>
	import { requestErrorTip, timeStampToDate } from '@/common/tools.js';
	
	export default {
		data() {
			return {
				pageObj: {
					type: '' // consumption: 消费; recharge: 充值
				},
				dataObj: {
					loading: false,
					id: '',
					list: []
				},
				dicObj: {
					payStatus: {
						'1': '待支付',
						'2': '已完成',
						'5': '已取消'
					},
					type: {
						'1': '课程', // 课程
						'2': '培训', // 培训
						'3': '书籍', // 书籍
						'4': '试题' // 试题
					}
				},
			}
		},
		onLoad (event) {
			this.pageObj['type'] = event['type'] === '1' ? 'consumption' : 'recharge';
			this.dataObj['id'] = event['id'];
			// this.getData(); // 获取数据
		},
		onShow () {
			this.getData(); // 获取数据
		},
		// 下拉刷新
		onPullDownRefresh() {
			this.getData();
			setTimeout(function () {
				uni.stopPullDownRefresh();
			}, 1000);
		},
		methods: {
			// 立即支付
			onPayTap() {
				const payment_type = this.pageObj.type === 'consumption' ? 1 : 2;
				uni.navigateTo({
					url: '/pages/order/pay-order?payment_type=' + payment_type + '&order_id=' + this.dataObj.order_id + '&amount=' + this.dataObj.order_amount
				});
			},
			// 获取数据
			getData() {
				this.pageObj['loading'] = false;
				this.$Requset({
					url: this.$Api['order']['detail'],
					data: {
						order_id: this.dataObj['id'],
					},
					success: (res) => {
						this.pageObj['loading'] = true;
						const { data, status, msg } = res;
						if (!status) {
							requestErrorTip('toast', msg);
							return;
						}
						this.dataObj = data['data'];
						this.dataObj['payment_time'] = timeStampToDate(this.dataObj['payment_time'] * 1000);
					},
					fail: (err) => {
						console.log(err);
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	page{
		background-color: #f5f5f5;
	}
	.order-detail{
		padding-top: 18rpx;
		.block{
			.header{
				position: relative;
				border-bottom: 1rpx solid #EAEFF1;
				margin-bottom: 20rpx;
			}
			.content{
				height: 64rpx;
				line-height: 64rpx;
				.c-title{
					float: left;
					font-size: 26rpx;
					color: #1A1A1A;
				}
				.c-data{
					float: right;
					font-size: 26rpx;
					color: #7F7F7F;
				}
			}
			.amount{
				height: 52rpx;
				text-align: right;
				margin-top: 12rpx;
				.a-title{
					font-size: 22rpx;
					color: #7F7F7F;
				}
				.unit{
					font-size: 22rpx;
					color: $color-common;
					padding-right: 4rpx;
				}
				.number{
					font-size: 40rpx;
					font-weight: bold;
					color: $color-common;
				}
			}
		}
		.consumption{
			padding: 0 0 36rpx 272rpx;
			.cover{
				position: absolute;
				top: 0;
				left: 0;
				width: 254rpx;
				height: 158rpx;
				border-radius: 14rpx;
				background-color: #EEE;
			}
			.title{
				height: 80rpx;
				line-height: 40rpx;
				font-size: 28rpx;
				color: #1A1A1A;
				margin-bottom: 36rpx;
			}
			.info{
				height: 40rpx;
				line-height: 40rpx;
				font-size: 24rpx;
				color: #7F7F7F;
			}
		}
		.recharge{
			padding: 0 36rpx 36rpx 132rpx;
			.cover{
				position: absolute;
				top: 0;
				left: 0;
				width: 110rpx;
				height: 110rpx;
			}
			.title{
				line-height: 40rpx;
				font-size: 28rpx;
				color: #1A1A1A;
				margin-bottom: 34rpx;
			}
			.info{
				line-height: 40rpx;
				font-size: 24rpx;
				color: #7F7F7F;
			}
		}
		.pay-btn{
			width: 690rpx;
			height: 88rpx;
			line-height: 88rpx;
			font-size: 36rpx;
			color: #FFFFFF;
			text-align: center;
			background-color: $color-common;
			border-radius: 14rpx;
			margin: 60rpx auto;
		}
	}
</style>
